import React, {Component} from 'react'
import ReactDOM from 'react-dom'

// 受控组件：表单受react的state控制

class App extends Component{
    state = {
        txt:'',
        content: '',
        city:'bj',
        isChacked:false,
        ChackedValue: '没选择'
    }

    // 处理文本框
    handleChange = e =>{
        this.setState({
            // 通过e这个对象来获取表单input中的value
            // e.target指向事件执行时鼠标所点击区域的那个元素。
            txt: e.target.value
        })
    }

    // 处理富文本
    handleContent = e => {
        this.setState({
            content: e.target.value
        })
    }

    // 处理下拉框
    handleCity = e => {
        this.setState({
            city: e.target.value
        })
    }

    // 处理复选框
    handleChecked = e => {
        if (e.target.checked) {
            this.setState({
                isChacked: e.target.checked,
                ChackedValue: '选择了'
            })
        }else{
            this.setState({
                isChacked: e.target.checked,
                ChackedValue: '没选择'
            })
        }
    }

    render() {
        return (
            <div>
                {/* 文本框 */}
                <input type="text" value={this.state.txt} onChange={this.handleChange} />
                <p>{this.state.txt}</p>
                <br/>
                
                {/* 富文本 */}
                <textarea value={this.state.content} onChange={this.handleContent}></textarea>
                <p>{this.state.content}</p>
                <br/>

                {/* 下拉 */}
                <select value={this.state.city} onChange={this.handleCity}>
                    <option value="sh">沙海</option>
                    <option value="sz">深圳</option>
                    <option value="bj">北京</option>
                </select>
                <p>{this.state.city}</p>
                <br/>

                {/* 复选框 */}
                <input type="checkbox" checked={this.state.isChacked} onChange={this.handleChecked} />
                <p>{ this.state.ChackedValue }</p>
                <br/>
                
            </div>
            
        )
    }
}


ReactDOM.render(<App/>, document.getElementById('root'))